05773-200126 shiologyトップペイジのデザインを変えました
https://flic.kr/p/2ik7j5V https://live.staticflickr.com/65535/49443002533_71bcda40cc_k.jpg
機能的な特徴
ブログのタイトル「shiology.org」をヘッダに移動したことにより、記事を下方までスクロールした時点でもshiology.orgが表示され続けるため、それを押すことによって、即座にトップペイジに遷移できます。めっちゃ便利!! （ただし、スマホの小さい画面では従来通りスクロールして消えるようになってます） トップペイジで、写真を貼っていない書きかけペイジのサムネイルにはWIP|書きかけ.icon（quill / 羽ペン）アイコンが大きく表示されるようになりました。見分けやすい!!
デザイン的な特徴
トップペイジのサムネイルで、
角丸にしたのでちょっと印象が柔らかくなりました。
画像が上に、各タイトルが下に表示されるようになりました。
上端から画像が表示されるため、スクエアな写真なら全体が表示されます。
おかけで左上の「shio.icon」アイコン全体が途切れることなく表示できるようになりました。個人的にはこれ、とってもうれしい。
https://flic.kr/p/2ik7iDu https://live.staticflickr.com/65535/49443001058_6ce8bd6eb8_k.jpg
ブログを書き始めるにあたり、Scrapboxを使いたいので、もし可能ならそのデザインを変えたいとおっしゃる。例えばこのサイトのようなデザインがかっこいいと思う、と示されたのがこの二つ。 主たるリクエストはトップペイジのサムネイルでタイトルが画像より下に来るようにしたいとのこと。
「できると思いますよ。やってみましょう。」
そう伝えて帰京。
https://flic.kr/p/2ikaVpA https://live.staticflickr.com/65535/49443706692_8bca69246d_k.jpg
それを試しに自分のブログに適用してみたら、あら、これいい。
そこからCSSを編集開始。
サムネイル画像と各タイトルとの間にあった線を消去
その文字色をホワイトに変更
そのサイズと位置を微調整
バーガーアイコンのサイズを小さく調整
画像がない場合に、本文中の最初のアイコンをサムネイルとして表示。これにより、書きかけ記事のアイコンがサムネイル化
ピンしたペイジの見栄えに変化がないようにしました。ブログなのでそれでいい。
その結果、このデザインが完成。
https://gyazo.com/a4baa3d51b8ea91997602227d9bcecf9
美しい。
「WIP|書きかけ.icon書きかけ」を目立つようにした結果、書きかけの多さが白日の元にさらされていますが、まぁ良い。それが現実。ああ、スッキリ。
気分一新。
自分でCSSを編集する日が来るなんて、数年前には想像もつかなかった。それをする気にさせてくれたScrapboxに感謝。 写真は名古屋の岩正でいただいた味噌煮込みうどん「デラックス」（1,050円）。腰のあるうどんととろ〜りお餅、そして味噌が濃すぎず、ちょうどいい美味しさでした。 https://flic.kr/p/2ik9Mgh https://live.staticflickr.com/65535/49443484186_8de00ab1f9_k.jpg